<template>
	<NavBar :obj="{ title: title, color: '#000', backgroundColor: '#fff' }" />

	<view class="layout-col">
		<view class="item">
			<view class="label">提现金额</view>
			<view class="content flex items-center">
				<InputAmount v-model="formRef.amount" customClass="inp flex flex-1" placeholder="请填写提现金额" />

				<!-- <input type="number" placeholder="请填写提现金额" class="inp flex flex-1" placeholder-class="place-inp" v-model="formRef.amount" @input="amountInput" /> -->
				<view class="right" @click="all">全部提现</view>
			</view>
			<view class="bom">
				<text>可提现{{ account?.title }}</text>
				<text class="balance">{{ account?.balance }}</text>
			</view>
		</view>
	</view>

	<view class="layout-col">
		<view class="item">
			<view class="label">提现至</view>
			<view class="content-bank flex items-center" @click="modeOpen = true">
				<block v-if="method.name">
					<image :src="imgUrl + method.icon"></image>
					<view class="bank flex-1">
						<view class="bank-name">{{ method.name }}</view>
						<view class="bank-no">{{ method.tips }}</view>
					</view>
				</block>
				<view class="bank flex-1" v-else>
					<view class="bank-no chage-no">点击选择</view>
				</view>
				<view class="right"><up-icon name="arrow-right" size="18"></up-icon></view>
			</view>
		</view>
	</view>

	<view class="desc">
		<rich-text :nodes="info.factor?.draw_msg"></rich-text>
	</view>

	<view class="btn" @click="passwordShowOpen">
		<text>提现</text>
	</view>

	<view class="record flex items-center justify-center" @click="goUrl('/pages/draw/record')">
		提现记录
		<up-icon name="arrow-right-double" :color="theme?.themeColor" class="icon"></up-icon>
	</view>

	<up-popup v-model:show="modeOpen" :round="10" closeable="true">
		<view class="mode-title">请选择收款方式</view>
		<view class="pay_mode">
			<up-radio-group v-model="modeIndex" iconPlacement="right" size="20" iconSize="18">
				<block v-for="(item, index) in info.method" :key="index">
					<up-radio :name="index" :activeColor="theme?.themeColor">
						<template #label>
							<view class="item flex">
								<image :src="imgUrl + item.icon" class="icon"></image>
								<view class="top flex flex-col">
									<view class="text">{{ item.title }}</view>
									<view class="bom">
										<text :class="{ red: !item.bank_number }" v-if="item.type == 'bank'">
											{{ item.bank_name ? item.bank_name : '未绑定' }} {{ item.bank_number ? item.bank_number.slice(-4) : '' }}
										</text>
										<text :class="{ red: !item.wechat_name }" v-else-if="item.type == 'wechat'">{{ item.wechat_name ? item.wechat_name : '未绑定' }}</text>
										<text :class="{ red: !item.alipay_name }" v-else>{{ item.alipay_name ? item.alipay_name : '未绑定' }}</text>
									</view>
								</view>
							</view>
						</template>
					</up-radio>
				</block>
			</up-radio-group>
		</view>

		<view class="tm-btn" @click="modeSubmit">
			<text>确认</text>
		</view>
	</up-popup>

	<up-modal
		:show="modal.show"
		title="请确认"
		:content="modal.content"
		:confirmColor="theme?.themeColor"
		@confirm="confirmModal"
		showCancelButton="true"
		@cancel="modal.show = false"
		@closeOnClickOverlay="modal.show = false"
	></up-modal>
	<Password v-model:show="passwordShow" @confirm="saveDraw" />
</template>

<script setup>
	import { ref, nextTick } from 'vue';
	import { port, goUrl, imgUrl, hint, loading, closeLoading } from '/service/port';
	import { onShow, onLoad } from '@dcloudio/uni-app';
	import InputAmount from '/components/InputAmount.vue';
	import Password from '/components/Password.vue';
	import { useThemeStore } from '@/stores/theme';
	const title = ref('');
	onLoad((e) => {
		title.value = e.title;
	});

	const theme = useThemeStore();

	const modeOpen = ref(false);
	const info = ref({});
	const account = ref();
	const method = ref({});
	const modal = ref({
		show: false,
		content: '',
		url: ''
	});
	const modeIndex = ref(0);
	const formRef = ref({
		account: '',
		mode: '',
		amount: ''
	});

	const passwordShow = ref(false);

	onShow(() => {
		getDrawIndex();
	});

	function confirmModal() {
		modal.value.show = false;
		goUrl(modal.value.url);
	}

	function modeSubmit() {
		let val = info.value.method[modeIndex.value];
		if (val.type == 'bank') {
			if (!val.bank_number || !val.bank_name) {
				modal.value = {
					show: true,
					content: '尚未完善银行卡收款方式，是否去完善？',
					url: '/pages/user/set/method?type=bank&set=1'
				};
				return false;
			}

			method.value = {
				icon: val.icon,
				name: val.bank_name,
				tips: '**** **** **** ' + val.bank_number.slice(-4)
			};
		} else if (val.type == 'wechat') {
			if (!val.wechat_name || !val.wechat_image) {
				modal.value = {
					show: true,
					content: '尚未完善微信收款方式，是否去完善？',
					url: '/pages/user/set/method?type=wechat&set=1'
				};

				return false;
			}
			method.value = {
				icon: val.icon,
				name: val.title,
				tips: val.wechat_name
			};
		} else {
			if (!val.alipay_name || !val.alipay_image) {
				modal.value = {
					show: true,
					content: '尚未完善支付宝收款方式，是否去完善？',
					url: '/pages/user/set/method?type=alipay&set=1'
				};
				return false;
			}
			method.value = {
				icon: val.icon,
				name: val.title,
				tips: val.alipay_name
			};
		}
		modeOpen.value = false;
		formRef.value.mode = val.type;
	}

	function passwordShowOpen() {
		if (!formRef.value.amount) {
			hint('请填写提现金额');
			return false;
		}
		if (!formRef.value.mode) {
			hint('请选择提现方式');
			return false;
		}
		passwordShow.value = true;
	}

	function saveDraw(e) {
		formRef.value.pay_password = e;
		loading();
		port('saveDraw', formRef.value)
			.then((res) => {
				passwordShow.value = false;
				setTimeout(() => {
					closeLoading();
					hint(res.msg);
					goUrl('/pages/draw/record');
				}, 200);
			})
			.catch(() => {
				passwordShow.value = false;
			});
	}

	async function getDrawIndex() {
		formRef.value.amount = '';
		let res = await port('getDrawIndex');
		info.value = res.data;
		account.value = res.data.account[0];
		formRef.value.account = account.value.type;

		if (!res.data.method.length) {
			uni.showModal({
				title: '提示',
				content: '尚未完善收款方式，是否去完善？',
				success: function (res) {
					if (res.confirm) {
						goUrl('/pages/user/set/method-list');
					} else if (res.cancel) {
						hint('不完善收款方式，您将无法提现');
					}
				}
			});
		}
	}

	function all() {
		formRef.value.amount = parseInt(account.value.balance);
	}
</script>

<style scoped lang="scss">
	:global(page) {
		background-color: #f0f0f0;
		padding-bottom: 80rpx;
	}

	::v-deep .u-radio-group {
		display: flex !important;
		flex-direction: column !important;
		justify-content: space-between !important;
		gap: 24rpx !important;
	}
	::v-deep .u-radio {
		padding: 26rpx !important;
		margin: 0 30rpx !important;
		border-bottom: 1rpx solid #eee;
		&:last-child {
			border-bottom: none;
		}
	}

	.mode-title {
		font-weight: 500;
		font-size: 30rpx;
		color: #000000;
		text-align: center;
		padding-top: 20rpx;
	}

	.pay_mode {
		padding: 30rpx 0 60rpx 0;
		.item {
			.icon {
				width: 44rpx;
				height: 44rpx;
			}
			.top {
				// margin-top: 5rpx;
				align-items: start;
				margin-left: 15rpx;
				.text {
					font-weight: 500;
					font-size: 30rpx;
					color: #000000;
					margin-bottom: 20rpx;
				}
				.bom {
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					.red {
						color: #f81a2e;
					}
				}
			}
		}
	}

	.btn {
		background: $theme-bg-btn-color;
		border-radius: 44rpx;
		padding: 20rpx 0;
		text-align: center;
		margin: 30rpx;
		> image {
			width: 20rpx;
			height: 20rpx;
			margin-right: 15rpx;
		}
		> text {
			font-weight: 500;
			font-size: 30rpx;
			color: #ffffff;
		}
	}
	.record {
		color: $theme-color;
		font-size: 26rpx;
		margin: 50rpx;
		.icon {
			margin-top: 5rpx;
			margin-left: 8rpx;
		}
	}
	.desc {
		margin: 50rpx 40rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		word-break: break-all;
	}
	.layout-col {
		margin: 24rpx 30rpx;
		.item {
			background: #ffffff;
			border-radius: 20rpx;
			padding: 30rpx;
			.label {
				font-weight: 500;
				font-size: 30rpx;
				color: #000000;
			}
			.content {
				height: 120rpx;
				// line-height: 120rpx;
				// padding: 42rpx 0 32rpx 0;
				.inp {
					font-weight: 500;
					font-size: 50rpx;
					color: #000000;
					height: 120rpx;
					line-height: 120rpx;
				}
				.place-inp {
					color: #b6b6b6;
				}
				.right {
					font-weight: 400;
					font-size: 28rpx;
					color: #f81a2e;
				}
			}

			.content-bank {
				padding: 30rpx 0 0 0;

				> image {
					width: 70rpx;
					height: 70rpx;
					margin-right: 15rpx;
				}
				.bank {
					.bank-name {
						font-weight: 500;
						font-size: 28rpx;
						color: #000000;
					}
					.bank-no {
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						margin-top: 5rpx;
					}
					.chage-no {
						font-size: 30rpx;
					}
				}
			}

			.bom {
				padding-top: 26rpx;
				> text {
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
				}
				.balance {
					font-weight: 500;
					font-size: 24rpx;
					color: #f79904;
					margin-left: 5rpx;
				}
			}
		}
	}
</style>
